<template>
  <Waterfall :lazyload="false" :breakpoints="breakpoints" :gutter="8" :list="list" :column-count="2" :animationDelay='0'>
    <template #item="{ item }">
      <ul class="f-goods-box">
        <li @click="toDetail(item)">
          <img :src="item.image? item.image: defaultMealImg" alt="">
          <div class="f-text-box">
            <p class="f-name">{{item.packageName}}</p>
            <p class="f-mark">{{item.remark}}</p>
            <p class="f-price">CNY {{ (item.price/10/10).toFixed(2) }}</p>
          </div>
        </li>
      </ul>
      <p v-if="!list.length" class="f-center">没有更多了</p>
    </template>
  </Waterfall>
</template>
  
<script setup>
import router from '@/router'
import store from '@/store'
import { computed, ref } from 'vue'
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
const props = defineProps({
  productList: {
    type: Array
  },
  name: {
    type: String
  }
})

const list = computed(() => {
  return props.productList
})
const breakpoints = ref({
  3000: {
    //当屏幕宽度小于等于3000
    rowPerView: 8, // 一行8图
  },
  1800: {
    //当屏幕宽度小于等于1800
    rowPerView: 6,// 一行6图
  },
  1200: {
    //当屏幕宽度小于等于1200
    rowPerView: 4,
  },

  500: {
    //当屏幕宽度小于等于500
    rowPerView: 2,
  },
})
// defaultMealImg: require('@/assets/imgs/pic_package_default.png'),
const defaultMealImg = ref(require('@/assets/imgs/pic_package_default.png'))


const toDetail = (data) => {
  router.push({
    path: '/outChinaMeal/detail',
    query: {
      packId: data.packageId
    }
  })

  addCacheRoute()
}

const addCacheRoute = () => {
  console.log(props.name)
  if (props.name) {
    store.commit("addCacheRoute", props.name);
  }
}

</script>
  
<style lang="scss" scoped>
.f-goods-box {
  li {
    width: 177px;
    border-radius: 7px;
    border: 1px solid #dcdcdc;
    img {
      width: 100%;
      border-radius: 7px;
    }
    .f-text-box {
      padding: 10px;
      .f-name {
        font-size: 14px;
        margin-left: 2px;
      }
      .f-mark {
        display: inline-block;
        background: #f3f3f3;
        color: #757575;
        padding: 2px 5px;
        font-size: 10px;
        margin: 10px 0;
        border-radius: 3px;
      }
      .f-price {
        font-size: 14px;
        font-weight: 550;
        color: #ff4b48;
        margin-left: 2px;
      }
    }
  }
}
</style>
  
  